<template>
	<view class="targetUnit">
		<view class="check-top">
			<uni-easyinput class="top-input" trim="all" v-model="params.name" placeholder="请输入单位名称"
				:inputBorder="false">
				<template #right><text style="margin-right: 24rpx;">
						<uni-icons type="search" size="24" color='#a6a6a6' @click="getcheckList"></uni-icons>
					</text></template>
			</uni-easyinput>
			<view class="top-select">
				<view class="area-select" @click="toggle('bottom')">
					<text class="text">{{areaname}}</text>
					<uni-icons type="down" size="13" color='#a6a6a6' v-if="areaname == '所在位置'"></uni-icons>
					<view class="" @click.stop="cleararea()">
						<uni-icons type="clear" size="13" color='#a6a6a6' v-if="areaname != '所在位置'"></uni-icons>
					</view>
				</view>
				<view class="select-type">
					<uni-data-select v-model="params.typeId" :localdata="unittypeList" @change="change"
						placeholder='单位类型'></uni-data-select>
				</view>
				<uni-data-select v-model="params.levelId" style="width: 10rpx;" :localdata="unitlevelList"
					@change="change" placeholder='单位级别'></uni-data-select>
				<view class="filter">
					<image src="../../static/images/filter.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;"
						@click="toggle('right')">
					</image>
				</view>
			</view>
			<view class="check-total">
				<view class="total">
					共<text>{{total}} 条</text>结果
				</view>
				<view class="filter">
					<uni-data-select v-model="params.sortField" :localdata="timelist" @change="change()"
						style="width: 280rpx;" placeholder='按创建时间降序'></uni-data-select>
				</view>
			</view>
		</view>
		<!-- 内容区 -->
		<view class="check-bottom">
			<view v-if="institutionListData.length>0">
				<view class="popupCheckList" v-for="(item,index) in institutionListData" :key="index">
					<view class="popupCheckItem" @click="handlerdetail(item.institutionId)">
						<view class="popupCheckTitle">
							<view class="left">
								{{item.name}}
							</view>
							<image src="../../static/images/d2.png" class="checktt"></image>
						</view>
						<view class="middle">
							<image src="../../static/images/d1.png" class="checktt"
								style="margin-right: 8rpx;margin-top: 14rpx;">
							</image>
							{{item.areaName}}
						</view>
						<view class="bottom">
							<view class="bottomItem">
								单位类型：<text class="bottomType">{{item.institutionType}}</text>
							</view>
							<view class="bottomItem">
								所属行业：<text class="bottomType">{{ item.industryName}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else text="暂无数据" iconColor="#70a7fd" textColor="#85878B" mode="data"></u-empty>
		</view>
		<!-- 区域选择弹窗 -->
		<uni-popup ref="popup" background-color="#fff" border-radius="30rpx 30rpx 0 0">
			<view class="popup-content">
				<view class="popup-content-title">
					<text>请选择所在区域</text>
					<view class="popup-content-close">
						<uni-icons type="closeempty" size="20" color='#a6a6a6' @click="closepop"></uni-icons>
					</view>
				</view>
				<view class="popup-content-content">
					<view class="content-select">
						<view class="select-item" @click="handlerregion(1)">
							<view class="content-step">
								<view class="whiteline"></view>
								<view :class="params.provinceId ?'dot':'undot'"></view>
								<view :class="params.provinceId?'line':'whiteline'"></view>
							</view>
							<view class="content-text">
								<text :style="{color: step == 1?'#00aff1':'#a6a6a6'}">{{provinceName}}</text><uni-icons
									type="right" size="20" color='#a6a6a6'></uni-icons>
							</view>
						</view>
						<view class="select-item" @click="handlerregion(2)" v-if='params.provinceId'>
							<view class="content-step">
								<view class="line"></view>
								<view :class="params.cityId ?'dot':'undot'"></view>
								<view :class="params.cityId ?'line':'whiteline'"></view>
							</view>
							<view class="content-text">
								<text :style="{color: step == 2?'#00aff1':'#a6a6a6'}">{{cityName}}</text><uni-icons
									type="right" size="20" color='#a6a6a6'></uni-icons>
							</view>
						</view>
						<view class="select-item" @click="handlerregion(3)" v-if='params.cityId'>
							<view class="content-step">
								<view class="line"></view>
								<view :class="params.zoneId ?'dot':'undot'"></view>
								<view :class="params.zoneId ?'line':'whiteline'"></view>
							</view>
							<view class="content-text">
								<text :style="{color: step == 3?'#00aff1':'#a6a6a6'}">{{zoneName}}</text><uni-icons
									type="right" size="20" color='#a6a6a6'></uni-icons>
							</view>
						</view>
						<view class="select-item" @click="handlerregion(4)" v-if='params.zoneId'>
							<view class="content-step">
								<view class="line"></view>
								<view :class="params.streetId ?'dot':'undot'"></view>
								<view class="whiteline"></view>
							</view>
							<view class="content-text">
								<text :style="{color: step == 4?'#00aff1':'#a6a6a6'}">{{streetName}}</text><uni-icons
									type="right" size="20" color='#a6a6a6'></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="area-title">{{selecttitle}}</view>
				<view class="popup-content-area">
					<view class="area-content">
						<view
							:class="params.provinceId==item.value||params.cityId==item.value||params.zoneId==item.value||params.streetId==item.value ?'active':''"
							class="area-item" v-for="(item,index) in options" :key='index' @click="selectarea(item)">
							<text>{{item.label}}</text><uni-icons type="checkmarkempty" size="16"
								:color="params.provinceId==item.value||params.cityId==item.value||params.zoneId==item.value||params.streetId==item.value?'#00aff1':'#a6a6a6'"></uni-icons>
						</view>
					</view>
				</view>
				<view class="popup-content-button">
					<u-button type="primary" @click="determine">确定</u-button>
				</view>
			</view>
		</uni-popup>
		<!-- 筛选弹窗 -->
		<uni-popup ref="filterpopup" background-color="#fff" border-radius="30rpx  0  0 30rpx">
			<view class="filterpopup-content">
				<view class="filterpopup-title">
					更多筛选
				</view>
				<view class="industry">
					<view class="industry-title">
						所属行业:
					</view>
					<view class="industry-content">
						<view class="industry-item" v-for="(item,index) in supervisorList" :key='index'
							@click="selectfilter(1,item)" :class="params.industryId==item.dictValue ?'active':''">
							<!-- {{item.dictLabel}} -->
							<up-tooltip :buttons="[item.dictLabel]" :text="item.dictLabel" direction="top"
								:showCopy='false'></up-tooltip>
						</view>
					</view>
				</view>
				<view class="filterpopup-button">
					<view class="reset" @click="reset">
						重置
					</view>
					<view class="confime" @click="confime">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		getDictsApi,
		getAreaList
	} from "@/api/dict";

	import {
		institutionList
	} from "@/api/unitsList.js"
	import {
		onReachBottom
	} from "@dcloudio/uni-app"
	// 搜索参数
	let params = reactive({
		pageNum: 1,
		pageSize: 15,
		name: "",
		typeId: "",
		levelId: "",
		industryId: "",
		checkStatus: "",
		taskSource: "",
		region: [],
		provinceId: "",
		cityId: "",
		zoneId: "",
		streetId: "",
		sortOrder: "DESC"
	});
	let areaname = ref('所在位置')
	let provinceName = ref('请选择省')
	let cityName = ref('请选择市')
	let zoneName = ref('请选择区')
	let streetName = ref('请选择街道 ')
	//处理详情
	const handlerdetail = (id) => {
		uni.navigateTo({
			url: `/pages/unitDetails/unitDetails?institutionId=${id}`,

		});
	}

	//下拉筛选框
	const change = (value) => {
		params.pageNum = 1
		getcheckList()
	}
	//弹出区域选择
	let popup = ref(null)
	let filterpopup = ref(null)
	const toggle = (type) => {
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		switch (type) {
			case 'bottom':
				popup.value.open(type)
				break;
			case 'right':
				filterpopup.value.open(type)
				break;
			default:
				break;
		}
	}
	//关闭区域选择框
	const closepop = () => {
		popup.value.close()
	}
	/**
	 * @description: 表格数据接口
	 */
	let checkList = ref([])
	const institutionListData = ref([])
	const total = ref(0) //数据总条数
	const getcheckList = async (flag = true) => {
		// console.log('params', params)
		const res = await institutionList({
				pageNum: params.pageNum,
				pageSize: params.pageSize
			},
			params
		)
		if (flag) {
			institutionListData.value = res.rows
			total.value = res.total
		} else {
			institutionListData.value = [...institutionListData.value, ...res.rows];
		}
	};
	//触底加载更多
	onReachBottom(() => {
		if (total.value <= institutionListData.value.length) {
			uni.showToast({
				title: '已经到底咯~',
				icon: 'none',
			});
			return;
		} else {
			params.pageNum++; // 每触发一次触底事件，页码加1
			getcheckList(false);
		}
	});
	/**
	 * @description: 获取字典
	 */
	// 单位类型下拉
	const unittypeList = ref([]);
	// 单位级别下拉
	const unitlevelList = ref([]);
	// 所属行业下拉
	const supervisorList = ref([]);
	//时间排序
	const timelist = ref([])
	//区域数据
	const options = ref([])
	async function getDicts() {
		await getDictsApi("institution_type").then((res) => {
			//单位类型下拉
			if (res.code === 200) {
				res.data = res.data.map((item, index) => {
					item.text = item.dictLabel
					item.value = item.dictValue
					return item
				})
				unittypeList.value = res.data;
			}
		});
		await getDictsApi("institution_industry_type").then((res) => {
			//行业主管下拉
			if (res.code === 200) {
				supervisorList.value = res.data;
			}
		});
		await getDictsApi("fkwz_institution_level_type").then((res) => {
			//单位级别下拉
			if (res.code === 200) {
				res.data = res.data.map((item, index) => {
					item.text = item.dictLabel
					item.value = item.dictValue
					return item
				})
				unitlevelList.value = res.data;
			}
		});
		await getDictsApi("order_by_time_type").then((res) => {
			//时间排序
			if (res.code === 200) {
				res.data = res.data.map((item, index) => {
					item.text = item.dictLabel
					item.value = item.dictValue
					return item
				})
				timelist.value = res.data;
			}
		});
		await getAreaList({
			pid: 1
		}).then((res) => {
			// console.log('options.value1', options.value)
			options.value = res.data;
		});
	}
	//获取区域数据
	const getArea = (pid) => {
		getAreaList({
			pid: pid
		}).then((res) => {
			// console.log('options.value2', options.value)
			options.value = res.data;
		});
	}
	/**
	 * @description: 联级处理省市区操作
	 * @param {String} type 类型
	 */
	let step = ref(1)
	const handlerregion = (value) => {
		step.value = value
		switch (value) {
			case 1:
				getArea(1)
				selecttitle.value = '请选择省'
				break;
			case 2:
				getArea(params.provinceId)
				selecttitle.value = '请选择市'
				break;
			case 3:
				getArea(params.cityId)
				selecttitle.value = '请选择区/县'
				break;
			case 4:
				getArea(params.zoneId)
				selecttitle.value = '请选择街道'
				break;

			default:
				break;
		}
	};
	//选择区域
	let selecttitle = ref('选择省')
	const selectarea = (item) => {
		switch (step.value) {
			case 1:
				cityName.value = '请选择市'
				zoneName.value = '请选择区'
				streetName.value = '请选择街道'
				params.cityId = null
				params.zoneId = null
				params.streetId = null
				getArea(item.value)
				params.provinceId = item.value;
				step.value = 2
				provinceName.value = item.label
				selecttitle.value = '选择市'
				break;
			case 2:
				zoneName.value = '请选择区'
				streetName.value = '请选择街道'
				params.zoneId = null
				params.streetId = null
				getArea(item.value)
				params.cityId = item.value;
				step.value = 3
				cityName.value = item.label
				selecttitle.value = '选择区/县'
				break;
			case 3:
				streetName.value = '请选择街道'
				params.streetId = null
				getArea(item.value)
				params.zoneId = item.value;
				step.value = 4
				zoneName.value = item.label
				selecttitle.value = '选择街道'
				break;
			case 4:
				getArea(item.value)
				params.streetId = item.value;
				step.value = 5
				streetName.value = item.label
				selecttitle.value = '请点击确定'
				break;
			default:
				break;
		}
	}
	const determine = () => {
		closepop()
		areaname.value = ''
		// console.log('params.provinceId', params.provinceId)
		areaname.value = [
			params.provinceId && provinceName.value,
			params.cityId && cityName.value,
			params.zoneId && zoneName.value,
			params.streetId && streetName.value
		].filter(Boolean).join(' ');
		params.pageNum = 1
		getcheckList()
	}

	//清除区域
	const cleararea = () => {
		areaname.value = '所在位置'
		params.provinceId = null
		params.cityId = null
		params.zoneId = null
		params.streetId = null
		provinceName.value = '请选择省'
		cityName.value = '请选择市'
		zoneName.value = '请选择区'
		streetName.value = '请选择街道 '
		step.value = 1
		getArea(1)
		getcheckList()
	}
	//筛选数据
	const selectfilter = (type, item) => {
		switch (type) {
			case 1:
				params.industryId = item.dictValue
				// console.log(params.industryId)
				break;
				// case 2:
				// 	params.taskSource = item.dictValue
				// 	break;
			default:
				break;
		}
	}
	//重置
	const reset = () => {
		params.dateRange = [];
		params.startDate = "";
		params.endDate = "";
		params.industryId = ''
		// params.taskSource = ''
		filterpopup.value.close()
		getcheckList()
	}
	//筛选
	const confime = () => {
		filterpopup.value.close()
		getcheckList()
	}
	onMounted(() => {
		getcheckList()
		getDicts();
	})
</script>

<style lang="scss" scoped>
	.targetUnit {
		width: 100%;
		height: 100vh;
		background-color: #FAFAFA;

		.check-top {
			position: fixed;
			top: 0;
			box-sizing: border-box;
			padding: 20rpx 40rpx 0 40rpx;
			background-color: #ffffff;
			z-index: 10;
			width: 100vw;

			// border: 1px solid red;
			.bottom-search {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #333333;

				.search-item {
					padding: 10rpx 16rpx;
					background: #BFD4E8;
					border-radius: 12rpx;
				}

				.active {
					background: linear-gradient(-90deg, #00C2D3, #00A7FF);
				}
			}

			.check-total {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
			}

			.top-input {
				border: 2rpx solid #70a7fd;
				border-radius: 60rpx;
				margin-bottom: 10rpx;
			}

			.top-select {
				display: flex;
				justify-content: space-between;


				:deep(.uni-select) {
					border: unset;
				}

				.area-select {
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 20rpx;
					color: #7a7a7a;

					// .text {
					// 	margin-right: 80rpx;
					// }
				}

				.select-type {
					width: 40%;
					// border: 1px solid red;

					:deep(.uni-select__input-text) {
						width: 60%;
						color: #333;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
						overflow: hidden;
					}

					:deep(.uni-select__selector) {
						width: 400rpx;
					}
				}

				.filter {
					display: flex;
					align-items: center;
					margin-left: 20rpx;

				}
			}

			:deep(.uni-easyinput__content) {
				background-color: transparent !important;
			}

		}

		.check-bottom {
			width: 100%;
			// height: calc(100vh - 230rpx);
			margin-top: 220rpx;
			// height: 100vh;
			background-color: #fafafa;
			// padding: 300rpx 40rpx 0 40rpx;
			// border: 1px solid red;
			overflow-y: auto;

			:deep(.u-icon__icon) {
				top: 100rpx !important;
			}

			:deep(.u-empty__text) {
				margin-top: 140rpx;
			}

			.popupCheckList {
				width: 92%;
				// height: 15vh;
				margin: auto;
				// border: 1px solid blue;
				background-color: rgba(255, 255, 255, 0.9);
				box-shadow: 0px 0px 30px 0px rgba(70, 136, 211, 0.1);
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				padding: 10rpx 0;

				.popupCheckItem {
					width: 93%;
					// height: 86%;

					.popupCheckTitle {
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 2rpx solid #EEEEEE;
						height: 60rpx;

						.left {
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #333333;
						}
					}

					.middle {
						font-family: PingFang SC;
						font-size: 28rpx;
						color: #333333;
						margin-top: 13rpx;
						line-height: 50rpx;
					}

					.bottom {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.bottomItem {
							// width: 50%;
							font-family: PingFang SC;
							font-size: 28rpx;
							color: #666666;
							line-height: 50rpx;

							.bottomType {
								font-family: PingFang SC;
								font-size: 28rpx;
								color: #333333;


							}
						}
					}

					.checktt {
						width: 26rpx;
						height: 30rpx;
					}
				}
			}
		}

		.popup-content {
			display: flex;
			flex-direction: column;
			position: relative;
			height: 80vh;
			border-radius: 20rpx;
			padding: 20rpx;

			.popup-content-title {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				font-weight: 700;
			}

			.popup-content-close {
				position: absolute;
				top: 50rpx;
				right: 20rpx;
			}

			.popup-content-content {
				margin-top: 20rpx;

				.content-select {
					border-bottom: 1px solid #ececec;
					padding-bottom: 20rpx;

					.select-item {
						display: flex;
						align-items: center;
						width: 100%;

						.content-step {
							display: flex;
							flex-direction: column;
							align-items: center;
							width: 60rpx;

							.dot {
								width: 16rpx;
								height: 16rpx;
								background-color: #00aff1;
								border-radius: 50%;
							}

							.undot {
								width: 16rpx;
								height: 16rpx;
								border: 1px solid #00aff1;
								background-color: #ffffff;
								border-radius: 50%;
							}

							.line {
								width: 4rpx;
								height: 30rpx;
								background-color: #00aff1;
							}

							.whiteline {
								width: 4rpx;
								height: 30rpx;
								background-color: #ffffff;
							}
						}

						.content-text {
							display: flex;
							justify-content: space-between;
							flex: auto;
						}
					}
				}

			}

			.area-title {
				padding: 10rpx 20rpx;
				font-weight: 700;
			}

			.popup-content-area {
				flex-grow: 1;
				/* 子元素将扩展以填充父容器的剩余空间 */
				width: 100%;
				overflow-y: scroll;

				.area-content {
					.area-item {
						display: flex;
						justify-content: space-between;
						padding: 10rpx 20rpx;
					}

					.active {
						color: #00A7FF;
					}
				}
			}
		}

		.filterpopup-content {
			width: 70vw;
			padding: 20rpx;

			.filterpopup-title {
				font-weight: 700;
				border-bottom: 1px solid #eaeaea;
				padding-bottom: 14rpx;
			}

			.industry {
				font-size: 24rpx;
				padding: 10rpx 0;

				.industry-title {
					padding: 10rpx 0;
				}

				.industry-content {
					display: flex;
					flex-wrap: wrap;

					.industry-item {

						width: 22%;
						// background: linear-gradient(-90deg, #00C2D3, #00A7FF);
						margin-bottom: 20rpx;
						margin-right: 10rpx;
						background: #bfd5e9;
						border-radius: 30px;
						padding: 10rpx 20rpx;
						text-align: center;

						:deep(.u-tooltip__wrapper__text) {
							display: inline-block;
							width: 100rpx;
							white-space: nowrap;
							/* 不换行 */
							overflow: hidden;
							/* 隐藏超出的内容 */
							text-overflow: ellipsis;
							/* 超出的部分显示为省略号 */
						}

						// :deep(.u-fade-enter-active){
						// 	top: -0rpx !important;
						// }
						// :deep(.u-fade-leave-active){
						// 	top: -170rpx !important;
						// }
					}

					.active {
						background: linear-gradient(-90deg, #00C2D3, #00A7FF);
					}
				}
			}

			.filterpopup-button {
				position: absolute;
				bottom: 0;
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin: 0 40rpx 40rpx 0;

				.reset {
					padding: 10rpx 0;
					text-align: center;
					width: 30%;
					border-radius: 4px;
					border: 1px solid #00ABF7;
					color: #00ABF9;
				}

				.confime {
					padding: 10rpx 0;
					text-align: center;
					width: 30%;
					background: linear-gradient(-90deg, #00C2D3, #00A7FF);
					border-radius: 4px;
					color: #ffffff;
				}
			}
		}
	}
</style>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.targetUnit {
		:deep(.uni-select) {
			border: unset;
		}
	}
</style>